<!-- 登录 -->
<template>
	<view class="login-box">
		<view class="welcome-box">
			<view class="nl-margin-bottom-md">
				Hi~尊敬的用户
			</view>
			<view>
				欢迎登入牛利家园物业端！
			</view>
		</view>

		<view class="content-box">
			<view class="content-ul nl-shadow-box">
				<view class="nl-flex-list">
					<u-input class="input" v-model="loginInfo.username" type="number" placeholder="请输入用户名" />
				</view>
				<view class="nl-flex-list">
					<u-input class="input" v-model="loginInfo.password" type="password" placeholder="请输入密码" />
				</view>
			</view>
		</view>
		<view class="remember-psw">
			<u-checkbox-group >
				<u-checkbox active-color="#1585FC" v-model="rememberPsw">
					<text>记住密码</text>
				</u-checkbox>
			</u-checkbox-group>
		</view>

		<view class="button-lg"><button @click="login()">登录</button></view>

		<view class="agreement">
			<u-checkbox-group>
				<u-checkbox active-color="#1585FC" v-model="agreementState" shape="circle">
					<text>登录代表您已经同意</text>
					<text class="words"
						@click.stop="$goToUrl('/pages/login/agreement/agreement',true)">牛利家园服务协议、隐私政策</text>
				</u-checkbox>
			</u-checkbox-group>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	import {
		getToken
	} from 'api/user';
	import {
		getCommunity
	} from 'api/common';
	export default {
		data() {
			return {
				agreementState: false,

				loginInfo: {
					username: '',
					password: ''
				},
				rememberPsw: true,
				//  按钮样式
				customStyle: {
					marginTop: '20px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					backgrund: 'red'
				}
			}
		},
		computed: {
			...mapState('user', ['userInfo','userId','userCommunity'])
		},
		mounted() {
			let that = this;
			//页面加载完成，获取本地存储的用户名及密码
			const userName = uni.getStorageSync('userName');
			const userPsw = uni.getStorageSync('userPsw');
			if (userName && userPsw) {
				that.loginInfo.username = userName;
				that.loginInfo.password = userPsw;
			} else {
				that.loginInfo.username = "";
				that.loginInfo.password = "";
			}
		},
		onLoad() {},
		onUnload() {},
		methods: {
			...mapActions('user', ['saveUserInfo', 'saveUserCommunity']),
			...mapActions('websocket', ['WEBSOCKET_INIT']),
			// 登陆
			login() {
				let text = '';
				let state = '0';
				if (!this.loginInfo.username && state == '0') {
					text = '请输入用户名';
					state = '1'
				}
				if (!this.loginInfo.password && state == '0') {
					text = '请输入密码';
					state = '1'
				}

				if (!this.agreementState) {
					text = '请阅读并勾选底部协议';
					state = '1'
				}

				if (state == '1') {
					uni.showToast({
						title: text,
						icon: 'none',
						duration: 1500
					})
					return false
				}

				var that = this
				console.log('this.loginInfo', this.loginInfo)
				getToken(this.loginInfo).then((res) => {
					console.log('获取token', res)
					// 保存信息
					if (res.result == 0) {
						that.saveUserInfo(res)
						that.getCommunity()
						if (that.rememberPsw) { //用户勾选“记住密码”
							uni.setStorageSync('userName', that.loginInfo.username);
							uni.setStorageSync('userPsw', that.loginInfo.password);
						} else { //用户没有勾选“记住密码”
							uni.removeStorageSync('userName');
							uni.removeStorageSync('userPsw');
							that.loginInfo.username = "";
							that.loginInfo.password = "";

						}
					}
				}).catch(function(reason) {
					uni.showToast({
						title: reason.data,
						icon: 'none',
						mask: true,
						duration: 3000
					});
				})
			},
			// 获取小区信息
			getCommunity() {
				var that = this
				const data = {
					userId: this.userInfo.userId,
					storeId: this.userInfo.storeId,
					page: 1,
					row: 50
				}
				getCommunity(data).then((res) => {
					console.log('获取小区信息', res)
					if (res.total < 1) {
						uni.showToast({
							icon: none,
							title: '当前员工还没有隶属小区,请先去后台添加'
						});
						return;
					} else {
						// 存储小区信息
						that.saveUserCommunity(res.communitys[0])
						let userId = that.userId
						let communityId = res.communitys[0].communityId
						let userData = {
							userId:userId,
							communityId:communityId
						}
						//  启动Socket  `ws://192.168.1.78:8012/ws/message/${userId}/${communityId}`
						that.WEBSOCKET_INIT(userData)
					}
					uni.navigateBack({
						delta: 1
					});
				})
			}
		}
	}
</script>

<style lang="scss">
	.login-box {
		width: 100%;
		background-image: url(../../../static/tbbj.png);
		background-size: 100% auto;
		background-repeat: no-repeat;
		.remember-psw{
			text-align: right;
			padding: 0 32rpx;
			.u-checkbox-group{
				display: inline-block;
			}
		}
	}

	.welcome-box {
		width: 100%;
		padding: 40rpx 20rpx;

		view:nth-child(1) {
			font-size: $uni-font-size-lg;
			color: #FFFFFF;
			font-weight: bold;
		}

		view:nth-child(2) {
			font-size: $uni-font-size-sm;
			color: #FFFFFF;
			font-weight: 200;
		}
	}

	.content-box {
		padding: 0 32rpx;
		// margin-bottom: 60rpx;
		margin-bottom: 10rpx;
	}

	.agreement {
		display: flex;
		padding: 10rpx 32rpx;
		justify-content: center;

		text {
			font-size: $uni-font-size-sm;
		}

		.words {
			color: $nl-color-main;
		}
	}
</style>
